<template>
  <zero-dialog :showDialog.sync="dialog.open" :width="dialog.width" :title="dialog.title"
               :fullscreen.sync="dialog.fullscreen" :id="dialog.id"
               :submit="assignPermissionsSubmitForm">
          <div slot="body">
            <div v-loading="treeLoading">
              <div style=" text-align: center;">
                <el-checkbox v-model="menuExpand" border @change="handleCheckedTreeExpand($event)">展开/折叠</el-checkbox>
                <el-checkbox v-model="menuNodeAll" border @change="handleCheckedTreeNodeAll($event)">全选/全不选</el-checkbox>
                <el-checkbox v-model="checkStrictly" border @change="handleCheckedTreeConnect($event)">父子联动</el-checkbox>
              </div>
              <el-input placeholder="输入关键字进行过滤" v-model="filterText" clearable style="margin-top: 20px"
                        prefix-icon="el-icon-search"/>
              <el-tree ref="treeRef" show-checkbox node-key="id" highlight-current check-on-click-node
                       :expand-on-click-node="false" :data="data" :check-strictly="!checkStrictly"
                       :filter-node-method="filterNode"
                       :props="{
        children: 'children',
        label: 'name'
      }" style="height: 45vh;  overflow: auto;"/>

            </div>
          </div>
        </zero-dialog>
</template>

<script>

export default {
  name: 'powerTree',
  data() {
    return {
      treeLoading: false,
      data: [],
      menuExpand: false,
      menuNodeAll: false,
      checkStrictly: true,
      filterText: '',
      roleId: null,
      dialog: {//弹框数据
        id: "powerTreeDialogId",
        fullscreen: false, // 弹框全屏
        open: false,//是否弹出表单
        title: '',//标题
        width: '500px', //定义宽度，默认400px
      },
    }
  },
  watch: {
    filterText(val) {
      this.$refs.treeRef.filter(val)
    }
  },
  methods: {
    initDialog(params) {
      let row = params.row
      this.dialog.open = true;
      this.dialog.title = "分配权限";
      //获取到当前角色关联的权限id数组
      this.roleId = row.id
      this.$nextTick(() => {
        this.getPowerTree(this.roleId) // 权限初始化
      })

    },
    getPowerTree(roleId) {
      this.menuExpand = false
      this.menuNodeAll = false
      this.checkStrictly = true
      this.filterText = ''
      this.treeLoading = true
      this.$refs.treeRef.setCheckedKeys([])
      const config = {
        url: '/sysMenu/getSelectTree?roleId=' + roleId,
        method: 'get'
      }
      this.$axiosAuth(config)
          .then(res => {
            this.data = res.data.data
            this.treeLoading = false
            this.menuNodeAll = res.data.checkAll
            this.setTreeData(res.data.menuIdList)
          })
          .catch(() => {
            this.treeLoading = false
          })
    },
    filterNode(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    setCheckedKeys(arr) { // 设置选中节点)
      this.$refs.treeRef.setCheckedKeys(arr)
    },
    getCheckedKeys() { // 获取选中节点（半选也算）
      return [...this.$refs.treeRef.getHalfCheckedKeys(), ...this.$refs.treeRef.getCheckedKeys()]
    },
    setTreeData(echoArr) {
      if (echoArr) {
        setTimeout(() => {
          echoArr.forEach((i, n) => {
            let node = this.$refs.treeRef.getNode(i)
            if (node) {
              this.$refs.treeRef.setChecked(node, true, false)
            }
          })
        }, 100)
      }
    },
    handleCheckedTreeExpand(value) {
      for (const key in this.$refs.treeRef.store.nodesMap) {
        this.$refs.treeRef.store.nodesMap[key].expanded = value
      }
    },
    handleCheckedTreeNodeAll(value) {
      this.$refs.treeRef.setCheckedKeys(value ? Object.keys(this.$refs.treeRef.store.nodesMap) : [])
    },
    handleCheckedTreeConnect(value) {
      this.checkStrictly = value;
    },
    /** 提交分配权限 */
    assignPermissionsSubmitForm() {
      let loading = this.$loading({target: `#${this.dialog.id} >div >.el-dialog`}) ;
      let config = {
        url: "/sysRole/assignPermissions",
        method: 'put',
        data: {
          id: this.roleId,
          idSet: this.getCheckedKeys()
        }
      }
      this.$axiosAuth(config).then(response => {
        this.$modal.msgSuccess(response.msg)
        this.dialog.open = false;
      }).finally(() => {
        loading.close()
      });
    }
  }
}
</script>
